<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>场馆管理</el-breadcrumb-item>
      <el-breadcrumb-item>场馆管理</el-breadcrumb-item>
    </el-breadcrumb>
            <div class="add">
            <el-button type="primary" @click="show = true;dialogTitle='添加场馆'">添加场馆</el-button>
        </div>
        <el-card>
            <el-table
                :data="productList"
                stripe
                border
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="场地名">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="场地类型">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.type === 1 ? "室内":"室外"}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sportId"
                    label="运动类型">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.sport.name}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="readme"
                    label="场馆概述">
                </el-table-column>
                <el-table-column
                    prop="message"
                    label="入馆须知">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="primary" @click="changeCommodity(scope.row)">修改</el-button>
                            <el-button type="danger" @click="delCommodity(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog :title="dialogTitle" :visible.sync="show" @close="()=>{resetForm('productForm')}">
            <el-form :model="productForm" :rules="productFormRules" ref="productForm">
                <el-form-item label="场地名" prop="name">
                    <el-input v-model="productForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="场地类型" prop="type">
                    <el-select v-model="productForm.type" placeholder="请选择">
                        <el-option
                            v-for="item in siteList"
                            :key="item.id"
                            :label="item.value"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="运动类型" prop="sportId">
                    <el-select v-model="productForm.sportId" placeholder="请选择">
                        <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="场馆概述" prop="readme">
                    <el-input el-input v-model="productForm.readme" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入馆须知" prop="message">
                    <el-input el-input v-model="productForm.message" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="()=>{resetForm('productForm');show = false;}">取 消</el-button>
                <el-button type="primary" @click="addCommodity" :loading='loading'>确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            siteList:[{
              id:1,
              value:'室内'
            },{
              id:2,
              value:'室外'
            },],
            typeList:[],
            loading:false,
            dialogTitle:'',
            show:false,
            productList:[],
            productForm: {
                name: "",
                type: "", 
                message: "", 
                readme: "",
                sportId: "",
            },
            productFormRules: {
                name:[ { required: true, message: '请输入场地名', trigger: 'blur' } ],
                type:[ { required: true, message: '选择场地类型', trigger: 'blur' } ],
                message:[ { required: true, message: '请输入场地概述', trigger: 'blur' } ],
                readme:[ { required: true, message: '请输入入馆须知', trigger: 'blur' } ],
                sportId:[ { required: true, message: '请输入运动类型', trigger: 'blur' } ],
            },
        }
    },
    async created(){
        this.getComputed()
        this.getList()
    },
    computed:{
        
    },
    methods:{
        async getList(){
            const { data } = await this.$http.get('venue/sport')
            if (data.state !== 0) return this.$message.error(data.msg)
            this.typeList = data.result
            
        },
        async getComputed(){
            const { data } = await this.$http.get('venue/yard')
            if (data.state !== 0) {
            return this.$message.error(data.msg)
            }
            this.productList = data.result
        },
        addCommodity(){
            this.$refs['productForm'].validate(async (valid) => {
                if(!valid) return
                let model = this.dialogTitle == '添加场馆' ? "post" : "put"
                this.loading = true
                this.$http[model]('venue/yard',this.productForm).then(async res=>{
                    let data1 = res.data
                    this.loading = false
                    this.show = false
                    this.resetForm('productForm')
                    this.getComputed()
                    if (data1.state !== 0) return this.$message.error(data1.msg)
                    this.$message.success(this.dialogTitle == '添加场馆' ? "添加成功" : "修改成功")
                    if(this.dialogTitle == '添加场馆'){
                        for (let index = 0; index < 8; index++) {
                            let { data2 } = await this.$http.patch('venue/yard',{
                                "id": data1.result.id,
                                index:index,
                                "times": [ {
                                        "id": 1, // id自填 单日不能重复
                                        "startTime": "08:00", // 开始时间
                                        "endTime": "10:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 2, // id自填 单日不能重复
                                        "startTime": "10:00", // 开始时间
                                        "endTime": "12:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 3, // id自填 单日不能重复
                                        "startTime": "12:00", // 开始时间
                                        "endTime": "14:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 4, // id自填 单日不能重复
                                        "startTime": "14:00", // 开始时间
                                        "endTime": "16:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 5, // id自填 单日不能重复
                                        "startTime": "16:00", // 开始时间
                                        "endTime": "18:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 6, // id自填 单日不能重复
                                        "startTime": "18:00", // 开始时间
                                        "endTime": "20:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 7, // id自填 单日不能重复
                                        "startTime": "20:00", // 开始时间
                                        "endTime": "22:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 8, // id自填 单日不能重复
                                        "startTime": "22:00", // 开始时间
                                        "endTime": "23:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },], // 默认每日时间安排 格式同上
                                "default": [ {
                                        "id": 1, // id自填 单日不能重复
                                        "startTime": "08:00", // 开始时间
                                        "endTime": "10:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 2, // id自填 单日不能重复
                                        "startTime": "10:00", // 开始时间
                                        "endTime": "12:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 3, // id自填 单日不能重复
                                        "startTime": "12:00", // 开始时间
                                        "endTime": "14:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 4, // id自填 单日不能重复
                                        "startTime": "14:00", // 开始时间
                                        "endTime": "16:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 5, // id自填 单日不能重复
                                        "startTime": "16:00", // 开始时间
                                        "endTime": "18:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 6, // id自填 单日不能重复
                                        "startTime": "18:00", // 开始时间
                                        "endTime": "20:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 7, // id自填 单日不能重复
                                        "startTime": "20:00", // 开始时间
                                        "endTime": "22:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },{
                                        "id": 8, // id自填 单日不能重复
                                        "startTime": "22:00", // 开始时间
                                        "endTime": "23:00", // 结束时间
                                        "price": 50, // 场地价格
                                        "capacity": 100, // 场地容量
                                        "reserved": 100, // 剩余容量
                                },], // 默认每日时间安排 格式同上
                            })
                        }
                    }
                })
                
            })
        },
        changeCommodity(item){
            this.dialogTitle = "修改场馆"
            this.show =true
            let obj = JSON.stringify(item)
            let itemInfo = JSON.parse(obj)
            itemInfo.sportId = item.sport.id
            console.log(itemInfo)
            this.productForm = itemInfo
        },
        delCommodity(item){
            this.$confirm('是否删除该场馆', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                console.log(item)
                const { data } = await this.$http.delete('venue/yard',{data:{id:item.id}})
                this.getComputed()
                if (data.state !== 0) return this.$message.error(data.msg)
                return this.$message.success("删除成功")
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>
    .add{
        display: flex;
        justify-content: flex-end;
    }
    .add .el-button{
        margin-bottom: 10px;
    }
</style>